<extend name="./public/frame.html"/>
<block name="content">
    <form action="" method="post" onsubmit="validate_form(this)">
    <div class="layui-row">
        <div class="layui-inline">
            <select id="all_order" name="all_order" class="layui-input" style="width: 90px;">
                <option value="">全部订单</option>
                <option value="1" <?php if($data['all_order'] == 1):?>selected<?php endif;?>>普通订单</option>
                <option value="2" <?php if($data['all_order'] == 2):?>selected<?php endif;?>>测试订单</option>
            </select>
        </div>
        <div class="layui-inline">
            <select name="province" lay-filter="province_id" id="province_id" class="layui-input" style="width: 120px;"
                    onchange="provinceChange();">
                <option value="">请选择省份</option>
                <volist name="province" id="vo">
                    <option  value="{$vo['region_id']}" <?php if($data['province']==$vo['region_id']){?> selected="selected"<?php }?>  /> {$vo['region_name']}  </option>
                </volist>
            </select>
        </div>
        <div class="layui-inline">
            <select name="city" lay-filter="city_id" id="city_id" class="layui-input" style="width: 120px;" onclick="provinceChange(1)">
                <option <if condition="$cityName['region_id']"> value="$cityName['region_id']" <else /> value="" </if>><?php if(isset($cityName)){?>{$cityName['region_name']}<?php }else{?>请选择城市<?php }?></option>
            </select>
        </div>

        <div class="layui-inline">
            <input type="text" class="layui-input date" name="start_time" value="<?php echo $data['start_time'];?>" readonly id="start_time" placeholder="开始时间" style="width: 120px;">
        </div>
        <div class="layui-inline">
            <input type="text" class="layui-input date" name="end_time" value="<?php echo $data['end_time'];?>" readonly id="end_time" placeholder="结束时间" style="width: 120px;">
        </div>

        <div class="layui-inline">
            <select lay-verify="required" lay-search="" name="fleet_id" id="fleet_id" class="layui-input"
                    style="width: 120px;margin-top: 3px;">
                <option value="">所属车队</option>
                <volist name="fleet_list" id="vo">
                    <option value="{$vo['id']}" <?php if($data['fleet_id']==$vo['id']){?> selected="selected" <?php }?> >{$vo['name']}</option>
                </volist>
            </select>
        </div>

        <div class="layui-inline">
            <button class="layui-btn" data-type="search" type="submit">搜索</button>
        </div>
    </div>
    </form>
    <table class="layui-table" style="width: 40%;float: left;" >
        <h2 class="layui-colla-title">

            <?php if(empty($dateArray['start_time']) && empty($dateArray['end_time'])):?>
            <span class="date" style="color: green"><?php echo date("Y/m/d",time()-604800)."======".date("Y/m/d");?></span>
            <?php else:?>
            <span class="date" style="color: green"><?php echo date("Y/m/d",strtotime($dateArray['start_time']));?></span>&nbsp;&nbsp;
            /&nbsp;&nbsp;
            <span class="date" style="color: green"><?php echo date("Y/m/d",strtotime($dateArray['end_time']));?></span>
            <?php endif;?>
            数据总览
            <!--（注释：<span style="color: red">活跃 - 连续在线N天/且完成2*N单</span>  /  <span style="color: red">僵尸 - 连续N天未上线/且未完成N单</span>）-->
        </h2>
        <tr>
            <td colspan="4" style="color: green">车队数据（车队司机总人数：{$driver_num}）</td>
        </tr>
        <tr>
            <td style="text-align: center;width: 25%;height: 25px;">总流水(元)</td>
            <td style="width: 25%">{$allMoney}</td>
            <td style="text-align: center;width: 25%;">实际流水</td>
            <td style="width: 25%">{$actualMoney}</td>
        </tr>
        <tr>
            <td style="text-align: center;width: 25%;height: 25px;">平台抽成(元)</td>
            <td style="width: 25%">{$platform_price}</td>
            <td style="text-align: center;width: 25%;height: 25px;">司机收入(元)</td>
            <td style="width: 25%">{$driverMoney}</td>
        </tr>
        <tr>
            <td style="text-align: center;width: 25%;height: 25px;">乘客补贴（元）</td>
            <td style="width: 25%">{$coupon_price}</td>
        </tr>
        <tr>
            <td colspan="4" style="color: green">推广车队总补贴:{$business}</td>
        </tr>

    </table>
    <table class="layui-table" style="width: 59%;float: right">
        <tr>
            <td>
                <div id="container" style="width: auto; height: 410px; margin: 0 auto"></div>
            </td>
        </tr>
    </table>
    <script src="https://cdn.highcharts.com.cn/highcharts/highcharts.js"></script>

    <script type="application/javascript">
        layui.use(['table', 'laytpl', 'laydate', 'form', 'laypage'], function () {
            var laydate = layui.laydate;
            //执行一个laydate实例
            laydate.render({
                elem: '#start_time', //指定元素
            });
            laydate.render({
                elem: '#end_time', //指定元素
            });
            lay('.date').each(function () {
                laydate.render({
                    elem: this
                    , type: 'date'
                    , trigger: 'click'
                });
            });

        });

        function provinceChange(type=0) {
                var province_id = $("#province_id").val();
                if (province_id === 0) {
                    $("#city_id").empty();
                    $("#city_id").append('<option value=>请选择城市</option>');
                    return false;
            }


            $.ajax({
                type: 'POST',
                url: "{:url('admin/Franchisee/cityList')}",
                data: {'province_id': province_id},
                success: function (res) {
                    // console.log(res)
                    if (type==1){
                        console.log($("#city_id").children("option").length);
                        if ($("#city_id").children("option").length<=1){
                            $("#city_id").append("<option value=''>全部城市</option>" + res);
                        }
                    }else {
                        $("select[name='city']").empty();
                        $("#city_id").append("<option value=''>全部城市</option>" + res);
                    }

                },
                error: function (res) {
                    // console.log(res)
                    layer.msg('请求错误');
                    return false;
                }
            });
        }
    </script>

    <script src="https://cdn.highcharts.com.cn/highcharts/highcharts.js"></script>
    <script>
        layui.use(['table','laydate' ],function () {
            var table = layui.table, laydate = layui.laydate;
            //下单时间检索
            lay('.date').each(function(){
                laydate.render({
                    elem: this
                    ,type: 'date'
                    ,trigger: 'click'
                });
            });
        });
        function validate_form() {
            var date1=new Date($('#start_time').val());
            var time1=(date1.getTime())/1000;
            var date2=new Date($('#end_time').val());
            var time2=(date2.getTime())/1000;;
            console.log(time1)
            console.log(time2)
            if (time1>time2){
                layer.msg('结束时间不能早于开始时间');return false;

            }
        }
        var chart = Highcharts.chart('container',{
            chart: {
                type: 'column'
            },
            title: {
                text: '城际-订单数据'
            },
            xAxis: {
                categories: [
                    '00:00','01:00','02:00','03:00','04:00','05:00','06:00','07:00','08:00','09:00','10:00','11:00',
                    '12:00','13:00','14:00','15:00','16:00','17:00','18:00','19:00','20:00','21:00','22:00','23:00'
                ],
                crosshair: true
            },
            yAxis: {
                min: 0,
                title: {
                    text: '订单数量'
                }
            },
            tooltip: {
                // head + 每个 point + footer 拼接成完整的 table
                headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                pointFormat: '<tr><td style="color:{series.color};padding:0"> </td>' +
                    '<td style="padding:0"><b>{point.y}</b></td></tr>',
                footerFormat: '</table>',
                shared: true,
                useHTML: true
            },
            plotOptions: {
                column: {
                    borderWidth: 0,
                    dataLabels: {
                        enabled: true,
                        inside: true //设置显示对应y的值
                    }
                }
            },
            series: [{
                name: '今天24小时订单数量',
                data: [{$sumOrderInfo}]
        }]
        });
    </script>
</block>
